<template>
	<view>
		<topbar :settings="settings"></topbar>
		<view class="content" :style="{'height':screenHeight}">
			<!-- 聊天框部分 -->
			<view class="communication">
				<scroll-view :scroll-top="scrollTop" scroll-y="true" @scroll="scroll" class="communication_talk">
					<view class="chat" :style="item.from == accid ? 'flex-direction:row-reverse' : ''"
						v-for="item in messageList" :key="item.id">
						<!-- 用户头像信息 -->
						<view class="user_head">
							<image src="../../static/img/my.png" :class="
			                    item.from == accid
			                      ? 'communication_img2 '
			                      : 'communication_img1'
			                  " />
						</view>
						<!-- 时间显示区域 -->
						<view class="user_time" :style="item.from == accid ? 'left:195rpx' : 'right:163rpx'">
							{{ item.sendtime }}
						</view>
						<!-- 用户聊天信息 -->
						<view class="user_message">
							<view :style="item.from == accid ? 'float:right' : 'left'" :class="
			                    item.from == accid
			                      ? 'communication_message1'
			                      : 'communication_message'
			                  ">
								{{ item.body.msg }}
							</view>
						</view>
					</view>
				</scroll-view>
				<!-- 输入框 -->
				<view class="textinput">
					<input placeholder="请输入文字" class="texttype" id="texttype" style="outline: none;"
						v-model="inputContext">
					<button type="default" class="btn" @click="sendup()">发送</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				settings: {
					title: '聊天窗口',
					backgroundColor: 'pink',
				},
				// 输入框内容
				inputContext: '',
				// 消息框内容
				messageList: [{
					from: this.faccid,
					sendtime: '123',
					body: {
						msg: '你好'
					}
				}],
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				message:{},
                begintime:''
			};
		},
		computed: {
			accid() {
				return this.$store.state.userinfo.accid
			},
			faccid() {
				return this.$store.state.friendaccid
			},
			screenHeight() {
				return this.$store.state.screenHeight
			}
		},
		created() {
			
		},
		methods: {
			// 将滑轮滚到最下面
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = this.screenHeight
				});
			},
			// 发送消息
			sendup() {
				let data0 = this.accid
				let data1 = this.faccid
				this.message.msg = this.inputContext
				let data2 = this.message
				console.log(data2)
				uni.request({
					url: 'http://118.178.241.20:8080/message/sendMsg',
					method: "POST",
					data: {
						from:data0,
						to:data1,
						ope:0,
						type:0,
						body:data2
					},
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						console.log(res.data.data)
						this.begintime = res.data.data+1
						console.log(this.begintime)
					},
				});
				this.messageList.push({
					body: {
						msg: this.inputContext
					},
					from: this.accid,
				});
				this.inputContext = "";
				setTimeout(() => {
					this.goTop();
				}, 100);
			},
			// 渲染接受对方的数组
			getMessgeList(){
				this.sendup()
				uni.request({
					url: 'http://118.178.241.20:8080/message/querySessionMsg',
					method: "POST",
					data: {
						begintime:0,
						endtime:this.begintime,
						from:this.faccid,
						to:this.accid,
						limit:1,
						reverse:2
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					success: (res) => {
						console.log(res.data.data[0].body.msg)
						this.messageList.push({
							body: {
								msg: res.data.data[0].body.msg
							},
							from: this.accid,
						});
					}
				});
				setTimeout(() => {
					this.goTop();
				}, 100);
			},
		    
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		position: absolute;
		top: 180rpx;
	}

	.communication {
		height: 100%;
		width: 100%;
	}

	.communication_talk::-webkit-scrollbar {
		width: 5rpx;
	}

	.common {
		height: 100%;
		width: 35%;
		border-left: 1rpx solid #409eff;
	}

	.common_communicate {
		height: 40%;
		width: 100%;
	}

	.common_communicate>p {
		font-size: 30rpx;
		font-weight: bold;
		color: #409eff;
		margin: 0;
		padding: 0;
		padding-top: 10rpx;
	}

	.common_problem {
		height: 60%;
	}

	.common_font {
		color: #409eff;
		font-size: 15rpx;
	}

	/* .problem{
	    border:1rpx red solid;
	  } */

	.problem>a {
		height: 50rpx;
		line-height: 50rpx;
		padding: 0 12rpx;
		border-radius: 25rpx;
		margin-right: 6rpx;
		margin-bottom: 8rpx;
		background-color: #f8f5f8;
		text-decoration: none;
		color: black;
		font-size: 15rpx;
		box-shadow: 0rpx 0rpx 5rpx rgb(209, 208, 208);
	}

	.problem>a:hover {
		color: #409eff;
		transition: 0.3s;
	}

	.communication_talk {
		height:75%;
		width: 100%;
		border-bottom: 2rpx solid #ffaaff;
		position: relative;
		display: block;
		overflow: auto;
		padding-bottom: 15rpx;
	}

	.service {
		border: 1rpx rgb(243, 243, 243) solid;
		position: fixed;
		z-index: 999;
		height: 20rpx;
		width: 64.2%;
		line-height: 20rpx;
		box-shadow: rgb(243, 243, 243);
		background-color: rgb(243, 243, 243);
	}

	.chat {
		min-height: 80rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		padding-bottom: 20rpx;
		padding-top: 25rpx;
		margin-right: 0;
		display: flex;
		position: relative;
	}

	.user_time {
		font-size: 5rpx;
		width: 150rpx;
		height: 10rpx;
		color: rgb(127, 127, 127);
		line-height: 10rpx;
		position: absolute;
		top: 0;
		text-align: center;
	}

	.communication_img1 {
		height: 50rpx;
		width: 50rpx;
		float: left;
	}

	.communication_message {
		padding: 15rpx;
		max-width: 300rpx;
		margin: 0;
		border-radius: 10rpx;
		/*设置矩形四个角为圆角*/
		background-color: #409eff;
		color: white;
		position: relative;
		box-sizing: border-box;
		max-width: 350rpx;
		float: left;
		left: 10rpx;
		top: 10rpx;
		min-height: 40rpx;
		word-break: break-all;
	}

	.communication_message:before {
		/*伪元素必须添加content*/
		content: "";
		width: 0;
		height: 0;
		/*IE6下，height:0;不顶用，可使用font-size:0; + overflow:hidden;修复此问题*/
		font-size: 0;
		overflow: hidden;
		display: block;
		border-width: 8rpx;
		border-color: #409eff transparent transparent transparent;
		/*为了兼容IE6，所有设置为透明（transparent）的边，需要设置为dashed；有颜色的边设置为solid*/
		border-style: solid dashed dashed dashed;
		position: absolute;
		/*绝对定位不占位置*/
		top: 15rpx;
		/* 向下移动 矩形的高度 + 矩形的上下内边距 + 下边框粗细*/
		left: -15rpx;
		/*相对于矩形宽度的位置*/
		-ms-transform: rotate(90deg);
		/* IE 9 */
		-webkit-transform: rotate(90deg);
		/* Safari and Chrome */
		transform: rotate(90deg);
	}

	.user_head {
		height: 65rpx;
		width: 65rpx;
		border-radius: 90rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #e0e0e0;
	}

	.communication_img2 {
		height: 50rpx;
		width: 50rpx;
		float: right;
	}

	.communication_message1 {
		padding: 15rpx;
		max-width: 300rpx;
		margin: 0 auto;
		border-radius: 10rpx;
		/*设置矩形四个角为圆角*/
		background-color: #409eff;
		color: white;
		position: relative;
		box-sizing: border-box;
		max-width: 350rpx;
		right: 10rpx;
		top: 10rpx;
		white-space: pre-line;
		word-wrap: normal;
		min-height: 40rpx;
		word-break: break-all;
	}

	.communication_message1:before {
		/*伪元素必须添加content*/
		content: "";
		width: 0;
		height: 0;
		/*IE6下，height:0;不顶用，可使用font-size:0; + overflow:hidden;修复此问题*/
		font-size: 0;
		overflow: hidden;
		display: block;
		border-width: 8rpx;
		border-color: #409eff transparent transparent transparent;
		/*为了兼容IE6，所有设置为透明（transparent）的边，需要设置为dashed；有颜色的边设置为solid*/
		border-style: solid dashed dashed dashed;
		position: absolute;
		/*绝对定位不占位置*/
		top: 15rpx;
		/* 向下移动 矩形的高度 + 矩形的上下内边距 + 下边框粗细*/
		right: -13rpx;
		/*相对于矩形宽度的位置*/
		-ms-transform: rotate(-90deg);
		-webkit-transform: rotate(-90deg);
		transform: rotate(-90deg);
	}

	.textinput {
		display: flex;
		width: 100%;
		box-sizing: border-box;
		height: 100rpx;
		border: 1px red solid;
	}

	.texttype {
		width: 70%;
		height: 60%;
		word-break: break-word;
		border: 0;
		resize: none;
		padding: 10rpx;
		margin: 0;
		box-sizing: border-box;
		font-size: 30rpx;
	}

	.texttype::-webkit-scrollbar {
		width: 5rpx;
	}
	.btn{
		width: 30%;
		height: 80rpx;
		font-size: 30rpx;
	}
</style>
